.popup {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  position: fixed;
  visibility: hidden;
  transition: visibility 0.5s ease-in-out;
  // 遮罩层
  &_mask {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 10;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease-in-out;
  }
  // 弹框容器
  &_container {
    opacity: 0;
    z-index: 11;
    position: absolute;
    background-color: white;
    transition: opacity 0.3s ease-in-out;
    &__close {
      top: 0.2rem;
      right: 0.2rem;
      width: 0.82rem;
      position: absolute;
      z-index: 1000;
    }
  }
  //* 弹框容器浮动样式 *//
  &.center {
    .popup_container {
      top: 50%;
      left: 50%;
      width: 84%;
      transform: translate3d(-50%, -50%, 0);
    }
  }
  &.bottom {}
  &.top {}
  &.left {}

  &.show {
    visibility: visible;
    .popup_mask {
      opacity: 1;
    }
    .popup_container {
      opacity: 1;
    }
  }
}

.content-popup {
  & .popup_container {
    position: relative;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
    box-shadow: rgba(0,0,0,0.3) 0 0 0.3rem;

    &__frame {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
    }
  }
}
